<script setup>
import { onReady } from '@dcloudio/uni-app'
import {	ref} from 'vue'
import { uniFetch } from '../../api/uni-fetch';

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets)

// 订单取消原因
const reason = ref('')
// 复制内容
const onCopy = (id) => {
	// 设置系统剪贴板的内容
	uni.setClipboardData({
		data: id
	})
}
// 获取页面参数
const query = defineProps({
	id: String,
})
console.log(query.id, 'ididididiidid');
// 获取页面栈

// 订单状态
const orderstatus = ref(1)
const orderInfo = ref({})
const statusText = ref('')
async function getDatail(id) {
	const { data } = await uniFetch.post('/shop-order/detail', { app_id: uni.appId, id })
	console.log(data, '订单详情');
	orderstatus.value = data.status
	if (orderstatus.value == 1) {
		statusText.value = '仓库打包中'
	} else if (orderstatus.value == 2) {
		statusText.value = '已发货'
	} else if (orderstatus.value == 3) {
		statusText.value = '订单完成'
	} else if (orderstatus.value == 99) {
		statusText.value = '订单已取消'
	} else if (orderstatus.value == 98) {
		statusText.value = '退换货中'
	} else if (orderstatus.value == 97) {
		statusText.value = '申请售后中'
	}

	orderInfo.value = data
}
getDatail(query.id)

const pages = getCurrentPages()
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1)
// 动画效果,需要页面渲染完毕之后在做
onReady(() => {
	// 动画效果,导航栏背景色
	pageInstance.animate(
		'.navbar',
		[{
			backgroundColor: 'transparent'
		}, {
			backgroundColor: '#f2f2f2'
		}],
		1000, {
		scrollSource: '#scroller',
		timeRange: 1000,
		startScrollOffset: 0,
		endScrollOffset: 50,
	}
	)
	// 动画效果，导航栏标题
	pageInstance.animate('.navbar .title', [{
		color: 'transparent'
	}, {
		color: '#040401'
	}], 1000, {
		scrollSource: '#scroller',
		timeRange: 1000,
		startScrollOffset: 0,
		endScrollOffset: 50,
	})
	// 动画效果，导航栏返回按钮
	pageInstance.animate('.navbar .back', [{
		color: '#f2f2f2'
	}, {
		color: 'red'
	}], 1000, {
		scrollSource: '#scroller',
		timeRange: 1000,
		startScrollOffset: 0,
		endScrollOffset: 50,
	})
})


const onOrderConfirm = () => {
	// 二次确认弹窗
	uni.showModal({
		content: '为保障您的权益，请收到货并确认无误后，再确认收货',
		success: async (success) => {
			if (success.confirm) {
				// const res = await putMemberOrderReceiptByIdAPI(query.id)
				// 更新订单状态
				console.log('更新订单状态');
				// order.value.orderState = OrderState.DaiPingJia
			}
		}
	})
}


function confirmOrder() {
	uni.showModal({
		title: '提示',
		content: '确认收货么?',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '收货成功'
				})
				orderstatus.value = 3
				statusText.value = '订单完成'
			}
		}
	})
}


function getContact(e) {
	console.log(e, '对话回调');
}
</script>

<template>
	<view>
		<!-- scroll-view 滚动到 50 时展示 -->
		<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
			<view class="wrap">
				<navigator v-if="pages.length > 1" open-type="navigateBack"> <uni-icons size="30" color="#fefefe"
						type="back"></uni-icons> </navigator>
				<navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home">
					<uni-icons color="#fefefe" size="30" type="back"></uni-icons>
				</navigator>
				<view class="title"> 订单详情 </view>
			</view>
		</view>


		<scroll-view scroll-y class="viewport" id="scroller" @scrolltolower="onScrolltolower">
			<template>
				<!-- 订单状态 -->
				<view class="overview" :style="{ paddingTop: safeAreaInsets.top + 20 + 'px' }">

					<template>
						<!-- 订单状态文字 -->
						<view class="status"> {{ statusText }} </view>

					</template>
				</view>
				<!-- 配送状态 -->
				<view class="shipment">
					<!-- 用户收货地址 -->
					<view class="locate">
						<view class="user">{{ orderInfo.receiver }} {{ orderInfo.phone }} </view>
						<view class="address"> {{ orderInfo.province }} {{ orderInfo.city }}
							{{ orderInfo.district }}{{ orderInfo.address }}
						</view>
					</view>
					<u-steps activeColor="#4e0072" dot current="10" direction="column">
						<u-steps-item title="下单" :desc="orderInfo.pay_time"> </u-steps-item>
						<u-steps-item title="已出库" :desc="orderInfo.send_time" v-if="orderInfo.status === 2"></u-steps-item>
						<u-steps-item title="快递已发出" v-if="orderInfo.status === 2"
							:desc="orderInfo.express_company + ' 单号:' + orderInfo.express_no"></u-steps-item>
						<u-steps-item title="售后中" desc="售后申请中" v-if="orderInfo.status === 97"> </u-steps-item>
						<!-- <u-steps-item title="售后中" desc="售后申请中" v-if="orderInfo.status === 97"> </u-steps-item>x -->
						<u-steps-item title="完成" desc="订单已完成" v-if="orderInfo.status === 3"> </u-steps-item>
						<u-steps-item title="订单取消" v-if="orderInfo.status === 99"> </u-steps-item>
					</u-steps>
				</view>

				<!-- 商品信息 -->
				<view class="goods">
					<view class="item" v-for="item in orderInfo?.product_detail" :key="item.id">
						<navigator class="navigator" hover-class="none"
							:url="`/pages/ProductDetails/ProductDetails?goodsId=${item.product_id}`">
							<image class="cover" :src="item.image" lazy-load></image>
							<view class="meta">
								<view class="name ellipsis">{{ item.product_name }}</view>
								<view class="price-actual">
									<view class="actual">
										<text class="symbol">¥</text>
										<text>{{ item?.unit_price?.toFixed(2) }}</text>
									</view>
								</view>
								<view class="quantity">x {{ item.count }}</view>
							</view>
						</navigator>
					</view>
					<!-- 合计 -->
					<view class="total">
						<view class="row">
							<view class="text">商品总价: </view>
							<view class="symbol">{{ orderInfo?.total_amount?.toFixed(2) }}</view>
						</view>
						<view class="row">
							<view class="text">优惠抵扣: </view>
							<view class="symbol">{{ orderInfo?.discount?.toFixed(2) }}</view>
						</view>
						<view class="row">
							<view class="text">运费: </view>
							<view>免运费</view>
						</view>
						<view class="row">
							<view class="text">应付金额: </view>
							<view class="symbol primary">{{ orderInfo?.amount?.toFixed(2) }}</view>
						</view>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="detail">
					<view class="title">订单信息</view>
					<view class="row">
						<view class="item">
							订单编号: {{ orderInfo.order_no }} <text class="copy" @tap="onCopy(orderInfo.order_no)">复制</text>
						</view>
						<view class="item" v-if="orderInfo.express_no">
							快递单号: {{ orderInfo.express_no }} <text class="copy"
								@tap="onCopy(orderInfo.express_no)">复制</text>
						</view>
						<view class="item">下单时间: {{ orderInfo.pay_time }}</view>
					</view>
				</view>


				<!-- 底部操作栏 -->
				<view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
				<view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">

					<!-- 其他订单状态:按需展示按钮 -->
					<template>
						<button class="button contact" open-type="contact" @contact="getContact">联系客服</button>
						<navigator :url="`/subpkg/ApplyRefund/ApplyRefund?id=${orderInfo.id}`" class="button secondary"
							hover-class="none" v-if="orderstatus !== 97 && orderstatus !== 99">
							申请售后
						</navigator>
						<!-- 待收货状态: 展示确认收货 -->
						<!-- <view class="button primary" v-if="orderstatus == 2" @click="confirmOrder">
							确认收货
						</view> -->
					</template>
				</view>
			</template>

		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
page {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.navbar {
	width: 750rpx;
	color: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	/* background-color: #f8f8f8; */
	background-color: transparent;

	.wrap {
		position: relative;

		.title {
			height: 44px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			/* color: #000; */
			color: transparent;
		}

		.back {
			position: absolute;
			left: 0;
			height: 44px;
			width: 44px;
			font-size: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			/* color: #000; */
			color: #fff;
		}
	}
}

.viewport {
	height: 100vh;
	background-color: #f7f7f8;
}

.overview {
	display: flex;
	flex-direction: column;
	align-items: center;

	line-height: 1;
	padding-bottom: 30rpx;
	color: #fff;
	background-color: $custom-theme-color;
	background-size: cover;

	.status {
		font-size: 36rpx;
		line-height: 60rpx;
	}
}

.shipment {
	line-height: 1.4;
	padding: 0 20rpx;
	margin: 20rpx 20rpx 0;
	border-radius: 10rpx;
	background-color: #fff;

	.locate,
	.item {
		min-height: 120rpx;
		padding: 30rpx 30rpx 25rpx 95rpx;
	}

	.locate {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 10rpx;
			transform: translateY(-50%);
			background: #f5e1ff url(../../static/images/loation.png) no-repeat center;
			background-size: 60%;
			// background-color:;
			height: 64rpx;
			width: 64rpx;
			border-radius: 37rpx;
		}


		.user {
			font-size: 29rpx;
			color: #444;
		}

		.address {
			font-size: 26rpx;
			color: #666;
		}
	}

	.item {
		// background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
		border-bottom: 1rpx solid #eee;
		position: relative;

		.message {
			font-size: 26rpx;
			color: #444;
		}

		.date {
			font-size: 24rpx;
			color: #666;
		}
	}
}

.goods {
	margin: 20rpx 20rpx 0;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;

		.navigator {
			display: flex;
			margin: 20rpx 0;
		}

		.cover {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.meta {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
		}

		.name {
			height: 80rpx;
			font-size: 26rpx;
			color: #444;
		}

		// .type {
		// 	line-height: 1.8;
		// 	padding: 0 15rpx;
		// 	margin-top: 6rpx;
		// 	font-size: 24rpx;
		// 	align-self: flex-start;
		// 	border-radius: 4rpx;
		// 	color: #888;
		// 	background-color: #f7f7f8;
		// }

		.price-actual {
			display: flex;
			margin-top: 26rpx;
			font-size: 28rpx;
		}

		.symbol {
			font-size: 20rpx;
		}

		.original {
			color: #999;
			text-decoration: line-through;
		}

		.actual {
			margin-left: 10rpx;
			color: #cf4444;
		}

		.text {
			font-size: 22rpx;
		}

		.quantity {
			position: absolute;
			bottom: 0;
			right: 0;
			font-size: 24rpx;
			color: #444;
		}

		.action {
			display: flex;
			flex-direction: row-reverse;
			justify-content: flex-start;
			padding: 30rpx 0 0;

			.button {
				width: 200rpx;
				height: 60rpx;
				text-align: center;
				justify-content: center;
				line-height: 60rpx;
				margin-left: 20rpx;
				border-radius: 60rpx;
				border: 1rpx solid #ccc;
				font-size: 26rpx;
				color: #444;
			}

			.primary {
				color: $custom-theme-color;
				border-color: $custom-theme-color;
			}
		}
	}

	.total {
		line-height: 1;
		font-size: 26rpx;
		padding: 20rpx 0;
		color: #666;

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;
		}

		.symbol::before {
			content: '¥';
			font-size: 80%;
			margin-right: 3rpx;
		}

		.primary {
			color: #cf4444;
			font-size: 36rpx;
		}
	}
}

.detail {
	line-height: 1;
	padding: 30rpx 20rpx 0;
	margin: 20rpx 20rpx 0;
	font-size: 26rpx;
	color: #666;
	border-radius: 10rpx;
	background-color: #fff;

	.title {
		font-size: 30rpx;
		color: #444;
	}

	.row {
		padding: 20rpx 0;

		.item {
			padding: 10rpx 0;
			display: flex;
			align-items: center;
		}

		.copy {
			border-radius: 20rpx;
			font-size: 20rpx;
			border: 1px solid #ccc;
			padding: 5rpx 10rpx;
			margin-left: 10rpx;
		}
	}
}

.toolbar-height {
	height: 100rpx;
	box-sizing: content-box;
}

.toolbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--window-bottom));
	z-index: 1;
	height: 100rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	border-top: 1rpx solid #ededed;
	border-bottom: 1rpx solid #ededed;
	background-color: #fff;
	box-sizing: content-box;

	.button {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 200rpx;
		height: 72rpx;
		margin-left: 15rpx;
		font-size: 26rpx;
		border-radius: 72rpx;
		border: 1rpx solid #ccc;
		color: #444;
	}

	.delete {
		order: 4;
	}

	.button {
		order: 3;
	}

	.secondary {
		order: 2;
		color: $custom-theme-color;
		border-color: $custom-theme-color;
	}

	button {
		order: 2;
		color: $custom-theme-color;
		border-color: $custom-theme-color;
		background-color: #fefefe;

		&::after {
			border: none;
		}
	}

	.primary {
		order: 1;
		color: #fff;
		background-color: $custom-theme-color;
	}
}

.popup-root {
	padding: 30rpx 30rpx 0;
	border-radius: 10rpx 10rpx 0 0;
	overflow: hidden;

	.title {
		font-size: 30rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.description {
		font-size: 28rpx;
		padding: 0 20rpx;

		.tips {
			color: #444;
			margin-bottom: 12rpx;
		}

		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx 0;
			color: #666;
		}

		.icon::before {
			content: '\e6cd';
			font-family: 'erabbit' !important;
			font-size: 38rpx;
			color: #999;
		}

		.icon.checked::before {
			content: '\e6cc';
			font-size: 38rpx;
			color: #27ba9b;
		}
	}

	.footer {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0 40rpx;
		font-size: 28rpx;
		color: #444;

		.button {
			flex: 1;
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
			margin: 0 20rpx;
			color: #444;
			border-radius: 72rpx;
			border: 1rpx solid #ccc;
		}

		.primary {
			color: #fff;
			background-color: $custom-theme-color;
			border: none;
		}
	}
}
</style>